
/*2018-04-28点赞动画*/
/*点赞动画*/
.mbox{
	height: 100%;
	position: fixed;
	pointer-events: none;
	z-index: 1000;
	left: 0;
	height: 100%;
	width:100%;
}
.lovebox{
	position: absolute;
	right: 20px;
	bottom: 40px;
	width: 16px;
	height: 16px;
	pointer-events: none;
	transform: translateZ(0); 

}
.lovebox img{
	display: block;
	width: 100%;
}

/*2018-05-08气球动画*/
/*气球动画*/
.qqdh{
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1001;
	overflow: hidden;
	pointer-events: none;
	/*display: none;*/
	webkit-transform: translate3d(0,0,0); 
-moz-transform: translate3d(0,0,0); 
-ms-transform: translate3d(0,0,0); 
-o-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);
}
.qqdh .adh{
	display: none;
}
.qqdh .adh>div{
    width: 40%;
    position: absolute;
    bottom: -26%;
    /*display: none;*/
   webkit-transform: translate3d(0,0,0); 
-moz-transform: translate3d(0,0,0); 
-ms-transform: translate3d(0,0,0); 
-o-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);
	
}
.qqdh .adh>div.qq1{
	left: 40%;
	width: 20%;
	bottom: -20%;

}
.qqdh .adh>div.qq1.mykey{
	animation: mykey3 2s linear infinite;
}
@keyframes mykey3{
	0%{left: 40%;}
	25%{left:42%}
	50%{left:40%}
	75%{left:38%}
	100%{left:40%}
}
.qqdh .adh>div.qq2{
	left: 25%;
}
.qqdh .adh>div.qq2.mykey{
	animation: mykey1 2s linear infinite;
}
@keyframes mykey1{
	0%{left: 25%;}
	25%{left:23%}
	50%{left:25%}
	75%{left:27%}
	100%{left:25%}
}

.qqdh .adh>div.qq3{
	left: 35%;
	
	
}
.qqdh .adh>div.qq3.mykey{
	animation: mykey2 2s linear infinite;
}
@keyframes mykey2{
	0%{left: 35%;}
	25%{left:37%}
	50%{left:35%}
	75%{left:33%}
	100%{left:35%}
}
.qqdh .adh>div img{
	width: 100%;
	display: block;
}

/*2018-05-08接吻动画*/
.jwdh{
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1001;
	overflow: hidden;
	pointer-events: none;
	webkit-transform: translate3d(0,0,0); 
-moz-transform: translate3d(0,0,0); 
-ms-transform: translate3d(0,0,0); 
-o-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);
}
.jwdh .ajw{
	/*position: relative;*/
	display: none;
	top: 30%;
}

.jwdh .ajw .girl{
	width: 32%;
	left: -32%;
	top: 40%;
	position: absolute;
}
.jwdh .ajw .boy{
	width: 28%;
	position: absolute;
	right: -28%;
	top: 40%;
}
.jwdh .ajw img{
	display: block;
	width: 100%;
}
.jwdh .mHuab{
	position: absolute;
	width: 5%;
	top: 20%;
	left: auto;
	animation: mydh 2s linear infinite;
}
@keyframes  mydh{
	0%{transform:rotate(0deg);}
	25%{transform:rotate(30deg);}
	50%{transform:rotate(0deg);}
	75%{transform:rotate(-30deg);}
	100%{transform:rotate(0deg);}
}

.jwdh .mHuab img{
	display: block;
	width: 100%;
}


/*2018-05-09送子动画*/
.szdh{
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1001;
	overflow: hidden;
	pointer-events: none;;
}
.szdh .asz{
	height: 100%;
	background: url(../images/szh_02.png) no-repeat bottom;
	background-size: 100%;
	position: absolute;
	width: 100%;
	top: 50vh;
}
.szdh .asz .szh1{
	width: 54%;
    position: absolute;
    bottom: 7vh;
    left: 13%;
    animation: myszh1 2s linear  infinite;
}
@keyframes myszh1{
	0%{transform: rotate(0deg);}
	25%{transform: rotate(1deg);}
	50%{transform: rotate(0deg);}
	75%{transform: rotate(-deg);}
	100%{transform: rotate(0deg);}
}
.szdh .asz .szh2{
    position: absolute;
    width: 30%;
    left: 52%;
    bottom: 18vh;
    animation: myszh2 2s linear 0.25s infinite;
}
@keyframes myszh2{
	0%{transform: rotate(0deg);}
	25%{transform: rotate(-10deg);}
	50%{transform: rotate(0deg);}
	75%{transform: rotate(10deg);}
	100%{transform: rotate(0deg);}
}

.szdh .asz .szh3{
	position: absolute;
    width: 36%;
    left: 52%;
    bottom: 21vh;
    animation: myszh3 2s linear infinite;
}

@keyframes myszh3{
	0%{transform: rotate(0deg);}
	25%{transform: rotate(20deg);}
	50%{transform: rotate(0deg);}
	75%{transform: rotate(-20deg);}
	100%{transform: rotate(0deg);}
}

.szdh .asz .szh4{
	position: absolute;
    width: 19%;
    left: -20%;
    bottom: 17vh;
    /*animation: szh4 4s 2s;*/
}

/*2018-05-29*/
.szdh .asz .szh5{
	position: absolute;
    width: 11%;
    left: 0%;
    bottom: 29vh;
    /*animation: szh5 4s;*/
}
/*@keyframes  szh5{
	from{left:0}
	to{left: "29%";}
}*/
.szdh .asz .szh6{
	position: absolute;
    width: 16%;
    left: 0%;
    bottom: 10vh;
     /*animation: szh6 4s ;*/
}
/*@keyframes  szh6{
	from{left:0}
	to{left: "55%";}
}*/
/*2018-05-29end*/

.szdh .asz .szh7{
	height: 10vh;
	position: absolute;
	bottom: 30vh;
	width: 100%;
}
.szdh .asz .szh7 span{
	width: 7%;
	display: block;
	animation: myszhxx 3s linear infinite;
}
@keyframes myszhxx{
	0%{transform: translateY(0);}
	50%{transform: translateY(-20px);}
	100%{transform: translateY(0px);}
}
.szdh .asz .szh7 span.xx1{
	position: absolute;
    bottom: 3vh;
    left: 8%;
}
.szdh .asz .szh7 span.xx2{
	    position: absolute;
    bottom: 8vh;
    left: 23%;
}
.szdh .asz .szh7 span.xx3{
	position: absolute;
    bottom: -3vh;
    left: 41%;
}
.szdh .asz .szh7 span.xx4{
    position: absolute;
    bottom: 4vh;
    left: 53%;
}
.szdh .asz .szh7 span.xx5{
	    position: absolute;
    bottom: 10vh;
    left: 68%;
}
.szdh .asz .szh7 span.xx6{
    position: absolute;
    bottom: 7vh;
    left: 86%;
}
.szdh img{
	width: 100%;
	display: block;
}
/*2018-05-10鲜花*/
.xhdh{
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1001;
	pointer-events: none;
	overflow: hidden;
	webkit-transform: translate3d(0,0,0); 
-moz-transform: translate3d(0,0,0); 
-ms-transform: translate3d(0,0,0); 
-o-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);
}
.xhdh img{
	width: 100%;
	display: block;
}
.xhdh .axh{
	height: 100%;
	position: relative;
	webkit-transform: translate3d(0,0,0); 
-moz-transform: translate3d(0,0,0); 
-ms-transform: translate3d(0,0,0); 
-o-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);
}




.xhdh .axh .xh1{
	position: absolute;
	width: 57%;
	bottom: -32%;
	left: 21.5%;
	
}
.xhdh .axh .xh2{
    width: 8%;
    position: absolute;
    z-index:1 ;
    top: 42%;
   	right: 0;
   	webkit-transform: translate3d(0,0,0); 
	-moz-transform: translate3d(0,0,0); 
	-ms-transform: translate3d(0,0,0); 
	-o-transform: translate3d(0,0,0); 
	transform: translate3d(0,0,0);
	will-change: transform;
 
}


/*礼物层*/
.xzdh{
	position: fixed;
	bottom: 0;
	width: 100%;
	background: #fff;
	text-align: center;
	z-index: 2000;
}
.xzdh  h2{
	font-size: 16px;
	color: #4D4D4D;
	margin:2vh 0;
	position: relative;
	
}
.xzdh  h2 span{
	position: absolute;
	right: 1rem;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	
}

.xzdh img{
	width: 100%;
	display: block;
}
.xzdh .liwu_list{
	display: flex;
    padding: 0 1%;
}
.xzdh .liwu_list li{
	flex: 1;
	position: relative;
	/*padding-bottom: 4vh;*/
	
	border: 1px solid #fff;
}
.xzdh .liwu_list li.now{
	border-color:#E96969;
}
.xzdh .liwu_list li.now .txt p{
	color:#E96969;
}



.xzdh .liwu_list li .txt{
    margin-top: -0.5rem;
	width: 100%;
	text-align: center;
	
}
.xzdh .liwu_list li .txt .name{
	color: #4D4D4D;
	font-size: 0.875rem;
}
.xzdh .liwu_list li .txt .jg{
	color: #9D9D9D;
	font-size: 0.75rem;
}
.xzdh button{
	height: 3rem;
	width: 90%;
	text-align: center;
	background: #E96969;
	border-radius: 5px;
	line-height: 3rem;
	font-size: 1rem;
	color: #FFFFFF;
	border: none;
	margin-top: 3vh;
    margin-bottom: 2vh;

}
.xzdh button em{
	font-style: normal;
}
.xzdh button:active{
	opacity: 0.8;
}

/*2018-05-21聊天礼物在通知处显示图片*/
.video_box .talk .content .message dl dt i{
	display: inline-block;
	width: 4rem;
	vertical-align: middle;	
}
.video_box .talk .content .message dl dt i img{
	display: block;
	width: 100%;
}
.video_box .talk .content .message2 dl dd p i{
	display: inline-block;
	width: 4rem;
	vertical-align: middle;	
}
.video_box .talk .content .message2 dl dd p i img{
	display: block;
	width: 100%;
}
